<template>
  <div class="amap-page-container">
    <el-amap vid="amapDemo" :zoom="zoom" :center="center" class="amap-demo">
      <el-amap-marker vid="component-marker" :position="componentMarker.position"></el-amap-marker>
    </el-amap>
  </div>
</template>

<script>
import VueAMap from "vue-amap";
import Vue from "vue";
Vue.use(VueAMap);
VueAMap.initAMapApiLoader({
  key: "3b9a40330bab14f2036cb5f0433a4151",
  plugin: ["AMap.Scale", "AMap.OverView", "AMap.ToolBar", "AMap.MapType"],
  v: "1.4.4"
});

export default {
  data() {
    return {
      count: 1,
      zoom: 14,
      center: [119.4555, 25.98942],
      componentMarker: {
        position: [119.4555, 25.98942]
      }
    };
  },
  methods: {}
};
</script>

<style lang="scss" scoped>
.amap-demo {
  height: 500px;
}
</style>

